<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理员板块</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        #app {
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .el-aside {
            flex: 0 0 auto;
            width: 200px;
            background-color: #f0f0f0;
            display: flex;
            flex-direction: column;
        }

        .menu {
            flex: 1;
        }

        .el-header {
            background-color: #333;
            color: #fff;
            padding: 20px;
        }
        .system-title{
            font-size: 24px;
            font-weight: bold;
        }
        .custom-header {
            padding: 13px 10px;
        }
        .custom-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .table-header {
            display: flex;
            align-items: center;
        }

        .search-container {
            margin-left: auto;
            display: flex;
        }

        .search-input {
            margin-right: 10px;
        }
        .delete-button {
            margin-right: 10px;
        }

        .delete1-button {
            color: red;
        }

        .recharge-button {
            color: orange;
        }
        .custom-main {
            display: flex;
        }

        .main-container {
            display: flex;
            height: 100%;
            width: 100%;
        }

        .left-half {
            flex: 1;
            /* 左半部分的样式 */
        }

        .right-half {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 20px;
            /* 右半部分的样式 */
        }

        .card-container {
            flex: 1;
        }

        .card-content {
            height: 100%;
            padding: 20px;
            /* 卡片内容的样式 */
        }
        .slide-fade-enter-active,
        .slide-fade-leave-active {
            transition: opacity 0.5s ease;
        }

        .slide-fade-enter,
        .slide-fade-leave-to {
            opacity: 0;
        }
        .header-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left-content {
            flex: 1;
        }

        .right-content {
            margin-left: auto;
        }
        .button-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .left-button {
            margin-right: 10px;
        }

        .right-button {
            margin-left: auto;
        }
        .tooltip-content-wrap {
            word-wrap: break-word; /* 使用 word-wrap 属性来实现自动换行 */
        }
        .truncate {
            white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
            max-width: 200px; /* 限制最大宽度 */
        }

        .auto-resizable .input-text {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
<div id="app">
    <el-container class="container">
        <el-header class="custom-header">
            <div class="header-content">
                <span class="system-title">医院预约挂号系统</span>
                <div style="float:right;margin-bottom: 20px;"><el-button type="text">退出</el-button></div>
            </div>
        </el-header>
    <el-container>
            <el-aside width="200px">
                <el-menu
                        v-model="selectedIndex"
                        @select="handleMenuSelect"
                        default-active="1"
                        class="menu"
                        router
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        :unique-opened="true"
                        :default-openeds="defaultOpeneds"
                >
                    <el-menu-item index="1">
                        <i class="el-icon-s-home"></i>
                        <span class="menu-item-text">首页</span>
                    </el-menu-item>
                    <el-menu-item index="2">
                        <i class="el-icon-user"></i>
                        <span class="menu-item-text">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-user"></i>
                        <span class="menu-item-text">医生管理</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-office-building"></i>
                        <span class="menu-item-text">科室管理</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-notebook-2"></i>
                        <span class="menu-item-text">药品管理</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <i class="el-icon-date"></i>
                        <span class="menu-item-text">预约管理</span>
                    </el-menu-item>
                    <el-menu-item index="7">
                        <i class="el-icon-s-data"></i>
                        <span class="menu-item-text">就诊记录</span>
                    </el-menu-item>
                    <el-menu-item index="8">
                        <i class="el-icon-receiving"></i>
                        <span class="menu-item-text">处方信息</span>
                    </el-menu-item>
                    <el-menu-item index="9">
                        <i class="el-icon-chat-dot-round"></i>
                        <span class="menu-item-text">留言反馈</span>
                    </el-menu-item>
                    <el-menu-item index="10">
                        <i class="el-icon-bell"></i>
                        <span class="menu-item-text">公告信息</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main class="custom-main">
                <div v-show="selectedIndex === '1'">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card class="chart-card">
                                <div id="chart-container" style="height: 820px;"></div>
                            </el-card>
                        </el-col>
                        <el-col :span="12">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <!-- 上半部分内容 -->
                                    <el-card class="card-style" style="height: 200px;margin-bottom: 20px;">
                                        <el-table
                                                stripe
                                                :data="tableIndexNoticeData"
                                                tooltip-effect="dark"
                                                style="width: 100%"
                                                fit
                                        >
                                            <el-table-column prop="notice" label="公告主题" ></el-table-column>
                                            <el-table-column prop="issueTime" label="发布时间"></el-table-column>
                                            </el-table-column>
                                        </el-table>
                                    </el-card>
                                </el-col>
                                <el-col :span="24">
                                    <!-- 下半部分内容 -->
                                    <el-card class="card-style" style="height: 635px">
                                        <div id="income-chart" style="width: 700px; height: 500px; margin-top: 80px"></div>                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>

                <div v-show="selectedIndex === '2'" style="width: 100%;">
                    <h2>用户信息</h2>
                     <div class="table-header">
                        <el-button type="danger" @click="deleteUserSelection" class="delete-button">删除</el-button>
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="searchUsername" placeholder="请输入账号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-select v-model="searchStatus" placeholder="请选择状态">
                                    <el-option label="启用" value="0"></el-option>
                                    <el-option label="禁用" value="1"></el-option>
                                </el-select>
                            </div>
                            <div class="search-input">
                                <el-input v-model="searchNick" placeholder="请输入昵称"></el-input>
                            </div>
                            <el-button type="primary" @click="searchUsers">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            ref="multipleTable"
                            :data="tableUserData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column fixed type="selection" width="55"></el-table-column>
                        <el-table-column prop="username" label="账号" align="center"></el-table-column>
                        <el-table-column prop="gender" label="性别" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.gender === 0 ? '' : 'success'">
                                    {{ scope.row.gender === 0 ? '男' : '女' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="birthday" label="生日" align="center">
                            <template slot-scope="scope">{{ scope.row.birthday }}</template>
                        </el-table-column>
                        <el-table-column prop="nickname" label="昵称" align="center"></el-table-column>
                        <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                        <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>
                        <el-table-column prop="address" label="地址" align="center">
                        </el-table-column>
                        <el-table-column prop="job" label="职业" align="center">
                        </el-table-column>
                        <!--不需要用户的余额显示，此处注销-->
                    <!--    <el-table-column prop="amount" label="金额" align="center">
                        </el-table-column>-->

                        <el-table-column prop="status" label="状态" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="switchUserValue[scope.row.id]"
                                        @change="handleSwitchUserChange(scope.row.id)"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949">
                                </el-switch>
                            </template>
                        </el-table-column>

                        <el-table-column prop="updateTime" width="100px" label="更新时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="300" align="center">
                            <template slot-scope="scope"><!--scope.row.id获取当前行的id属性数据-->
                                <el-button type="text" size="mini" @click="deleteUserById(scope.row.id)" class="delete1-button">
                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">删除</span>
                                </el-button>
                              <!--  <el-button type="text" size="mini" class="recharge-button" @click="showRechargeModal(scope.row.id)">
                                    <i class="el-icon-money" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">充值</span>
                                </el-button>-->
                               <el-button type="text" size="mini" class="edit-button" @click="editedUserById(scope.row.id)" >
                                    <i class="el-icon-edit" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">编辑</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页组件-->
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeUser"
                                @current-change="handleCurrentChangeUser"
                                :current-page="currentPageUser"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalUser">
                        </el-pagination>
                    </div>
                    <!--充值模态框开始-->
                    <el-dialog
                            title="充值"
                            :visible.sync="showRechargeDialog"
                            width="30%"
                            @close="closeRechargeModal">
                        <el-form label-width="80px">
                            <el-form-item label="充值金额:">
                                <el-input v-model="rechargeAmount" placeholder="请输入充值金额"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                <el-button @click="closeRechargeModal">取消</el-button>
                                <el-button type="primary" @click="performRecharge">确认充值</el-button>
                            </span>
                    </el-dialog>
                    <!--充值模态框结束开始-->
                    <!--用户编辑模态框开始-->
                    <el-dialog
                            title="编辑用户"
                            :visible.sync="editModalUserVisible"
                            width="30%"
                            @close="resetUserForm">
                        <el-form :model="editedUser" :rules="editUserForm" ref="editUserForm" label-width="80px">
                            <el-form-item label="昵称" prop="nickname">
                                <el-input v-model="editedUser.nickname"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="editedUser.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="editedUser.email"></el-input>
                            </el-form-item>
                            <el-form-item label="性别" prop="gender">
                                <el-radio-group v-model="editedUser.gender">
                                    <el-radio label="0">男</el-radio>
                                    <el-radio label="1">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="出生日期" prop="birthday">
                                <el-date-picker
                                        v-model="editedUser.birthday"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="地址" prop="address">
                                <el-input v-model="editedUser.address"></el-input>
                            </el-form-item>
                            <el-form-item label="职业" prop="job">
                                <el-input v-model="editedUser.job"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalUserVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitUserEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--用户编辑模态框结束-->
                </div>

                <div v-show="selectedIndex === '3'" style="width: 100%;">
                    <h2>医生信息</h2>
                    <div class="table-header">
                        <el-button type="danger" @click="deleteSelection" class="delete-button">删除</el-button>
                        <el-button type="primary" @click="showAddDialog">新增</el-button>

                        <!--增加模态框-->
                        <el-dialog
                                title="新增医生"
                                :visible.sync="dialogDoctorVisible"
                                width="30%"
                                @close="resetNewDoctor"
                        >
                            <el-form :model="newDoctor" :rules="addDoctorRules" ref="newDoctorForm" label-width="80px" label-width="80px">
                                <el-form-item label="工号" prop="no">
                                    <el-input v-model="newDoctor.no"></el-input>
                                </el-form-item>
                                <el-form-item label="帐号" prop="username">
                                    <el-input v-model="newDoctor.username"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名" prop="nickName">
                                    <el-input v-model="newDoctor.nickName"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="newDoctor.password"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="gender">
                                    <el-radio-group v-model="newDoctor.gender">
                                        <el-radio label="0">男</el-radio>
                                        <el-radio label="1">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="科室" prop="deptId">
                                    <el-select v-model="newDoctor.deptId" placeholder="请选择科室">
                                        <el-option
                                                v-for="dept in departments"
                                                :key="dept.id"
                                                :label="dept.deptname"
                                                :value="dept.id"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="出生日期" prop="birthday">
                                    <el-date-picker
                                            v-model="newDoctor.birthday"
                                            type="date"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="电话" prop="phone">
                                    <el-input v-model="newDoctor.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="newDoctor.email"></el-input>
                                </el-form-item>
                                <el-form-item label="学历" prop="degree">
                                    <el-select v-model="newDoctor.degree">
                                        <el-option label="本科" value="0"></el-option>
                                        <el-option label="硕士" value="1"></el-option>
                                        <el-option label="博士" value="2"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="入职时间" prop="joinTime">
                                    <el-date-picker
                                            v-model="newDoctor.joinTime"
                                            type="date"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="addDoctor">提交</el-button>
                                    <el-button @click="resetForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <!--增加模态框结束-->
                        <!--编辑模态框开始-->
                        <el-dialog
                                title="编辑医生"
                                :visible.sync="editModalVisible"
                                width="30%"
                                @close="resetForm">
                            <!-- 编辑表单内容 -->
                            <el-form :model="editedDoctor" :rules="editDoctorRules" ref="editForm" label-width="80px">
                                <el-form-item label="工号" prop="no">
                                    <el-input v-model="editedDoctor.no"></el-input>
                                </el-form-item>
                                <el-form-item label="帐号" prop="username">
                                    <el-input v-model="editedDoctor.username"></el-input>
                                </el-form-item>
                                <el-form-item label="姓名" prop="nickName">
                                    <el-input v-model="editedDoctor.nickName"></el-input>
                                </el-form-item>
                                <el-form-item label="性别" prop="gender">
                                    <el-radio-group v-model="editedDoctor.gender">
                                        <el-radio label="0">男</el-radio>
                                        <el-radio label="1">女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="科室" prop="deptname">
                                    <el-select v-model="editedDoctor.deptname" placeholder="请选择科室">
                                        <el-option
                                                v-for="dept in departments"
                                                :key="dept.id"
                                                :label="dept.deptname"
                                                :value="dept.id"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="出生日期" prop="birthday">
                                    <el-date-picker
                                            v-model="editedDoctor.birthday"
                                            type="date"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item label="电话" prop="phone">
                                    <el-input v-model="editedDoctor.phone"></el-input>
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="editedDoctor.email"></el-input>
                                </el-form-item>
                                <el-form-item label="学历" prop="degree">
                                    <el-select v-model="editedDoctor.degree">
                                        <el-option label="本科" value="0"></el-option>
                                        <el-option label="硕士" value="1"></el-option>
                                        <el-option label="博士" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="入职时间" prop="joinTime">
                                    <el-date-picker
                                            v-model="editedDoctor.joinTime"
                                            type="date"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-form>

                            <!-- 模态框底部按钮 -->
                            <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitEdit">提交</el-button>
                            </span>
                        </el-dialog>
                            <!--编辑模态框结束-->

                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="searchNo" placeholder="请输入工号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="searchName" placeholder="请输入姓名"></el-input>
                            </div>
                            <el-button type="primary" @click="searchDoctors">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            ref="multipleTable"
                            :data="tableDoctorData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="no" label="工号" align="center"></el-table-column>
                        <!--<el-table-column prop="username" label="帐号" align="center"></el-table-column>-->
                        <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
                        <el-table-column prop="gender" label="性别" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.gender === 0 ? '' : 'success'">
                                    {{ scope.row.gender === 0 ? '男' : '女' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deptname" label="科室" align="center"></el-table-column>
                        <el-table-column prop="birthday" label="生日" align="center">
                            <template slot-scope="scope">{{ scope.row.birthday }}</template>
                        </el-table-column>
                        <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                        <el-table-column prop="email" label="邮箱"  align="center"></el-table-column>
                        <el-table-column prop="degree" label="学历" align="center">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.degree === 0 ? '' : 'success'">
                                    {{ scope.row.degree === 0 ? '本科' : '硕士' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" label="状态" align="center">
                            <template slot-scope="scope">
                                <el-switch
                                        v-model="switchValue[scope.row.id]"
                                        @change="handleSwitchChange(scope.row.id)"
                                        active-color="#13ce66"
                                        inactive-color="#ff4949">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column prop="joinTime" width="100px" label="入职时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.joinTime }}</template>
                        </el-table-column>
                        <el-table-column prop="updateTime" width="100px" label="更新时间"  align="center">
                            <template slot-scope="scope">{{ scope.row.updateTime }}</template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="200"  align="center">
                            <template slot-scope="scope"><!--scope.row.address获取当前行的address属性数据-->
                                <el-button type="danger" size="mini" @click="deleteById(scope.row.id)">删除</el-button>
                                <el-button type="primary" size="mini" @click="editedById(scope.row.id)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                    <div style="margin-top: 20px">
                        <el-button @click="toggleSelection()" type="primary">取消选择</el-button>
                    </div>
                </div>

                <div v-show="selectedIndex === '4'" style="width: 100%">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card class="chart-card" v-show="showDeptCard">
                                <div style="height: 820px;">
                                    <h1>科室</h1>
                                    <el-divider></el-divider>
                                    <div class="table-header">
                                        <el-button type="danger" @click="deleteDeptSelection" class="delete-button">删除</el-button>
                                        <div class="search-container">
                                            <div class="search-input">
                                                <el-input v-model="searchDeptName" placeholder="请输入科室名称"></el-input>
                                            </div>
                                            <el-button type="primary" @click="searchDepts">查询</el-button>
                                        </div>
                                    </div>

                                    <el-table
                                            :data="tableDeptData"
                                            stripe
                                            style="width: 100%"
                                            @selection-change="handleSelectionChange">
                                        <el-table-column fixed type="selection" width="55"></el-table-column>
                                        <el-table-column prop="deptname" label="科室名称" width="180"></el-table-column>
                                        <el-table-column prop="deptremark" label="科室简介" width="250">
                                         <!--   <template slot-scope="scope">
                                                <el-tooltip placement="top" effect="light" :popper-options="{ maxWidth: 200 }">
                                                    <template #content>
                                                        <div v-if="scope.row.brief.length > 20">
                                                            <div v-for="line in splitText(scope.row.brief, 20)">{{ line }}</div>
                                                        </div>
                                                        <div v-else>{{ scope.row.brief }}</div>
                                                    </template>
                                                    <div>{{ scope.row.deptremark }}</div>
                                                </el-tooltip>
                                            </template>-->
                                        </el-table-column>
                                        <el-table-column label="操作" width="300" align="center">
                                            <template slot-scope="scope"><!--scope.row.id获取当前行的id属性数据-->
                                                <el-button type="text" size="mini" @click="deleteDeptById(scope.row.id)" class="delete1-button">
                                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">删除</span>
                                                </el-button>
                                                <el-button type="text" size="mini" class="edit-button" @click="editedDeptById(scope.row.id)" >
                                                    <i class="el-icon-edit" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">编辑</span>
                                                </el-button>
                                                <el-button type="text" size="mini" class="doctor-button" @click="selectDeptByIdFindDoctor(scope.row.id)">
                                                    <i class="el-icon-user" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">医生</span>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!--分页组件-->
                                    <div class="block" style=" float: right;margin-top: 20px">
                                        <el-pagination
                                                @size-change="handleSizeChangeDept"
                                                @current-change="handleCurrentChangeDept"
                                                :current-page="currentPageDept"
                                                :page-sizes="[5, 10, 15, 20]"
                                                :page-size="100"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="totalDept">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-empty description="选择科室,查看医生" v-show="showEmpty" style="padding-top: 200px">
                            <el-col :span="12">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-empty>
                        <el-col :span="12" v-loading="loading" element-loading-text="拼命加载中">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-card class="chart-card" v-show="showDoctorCard">
                                        <div style="height: 410px;">
                                            <h1>医生</h1>
                                            <el-divider></el-divider>
                                            <div class="search-container">
                                                <div class="search-input">
                                                    <el-input v-model="no" placeholder="请输入工号"></el-input>
                                                </div>
                                                <div class="search-input">
                                                    <el-input v-model="nickName" placeholder="请输入姓名"></el-input>
                                                </div>
                                                <el-button type="primary" @click="findDoctors()">查询</el-button>
                                            </div>
                                            <!--渲染数据到前端页面的表格-->
                                            <el-table
                                                    stripe
                                                    ref="multipleTable"
                                                    :data="ListDoctor"
                                                    tooltip-effect="dark"
                                                    style="width: 100%"
                                                    fit
                                            >
                                                <el-table-column prop="no" label="工号" align="center"></el-table-column>
                                                <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
                                                <el-table-column prop="gender" label="性别" align="center">
                                                    <template slot-scope="scope">
                                                        <el-tag :type="scope.row.gender === 0 ? '' : 'success'">
                                                            {{ scope.row.gender === 0 ? '男' : '女' }}
                                                        </el-tag>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column prop="phone" label="电话" align="center"></el-table-column>
                                                <el-table-column prop="degree" label="学历" align="center">
                                                    <template slot-scope="scope">
                                                        <el-tag :type="scope.row.degree === 0 ? '' : 'success'">
                                                            {{ scope.row.degree === 0 ? '本科' : '硕士' }}
                                                        </el-tag>
                                                    </template>
                                                </el-table-column>
                                                <el-table-column fixed="right" label="操作" width="100"  align="center">
                                                    <template slot-scope="scope"><!--scope.row.address获取当前行的address属性数据-->
                                                        <el-button type="danger" size="mini" @click="showSchedules(scope.row)">号源</el-button>
                                                    </template>
                                                </el-table-column>
                                            </el-table>
                                            <div class="block" style=" float: right;margin-top: 20px">
                                                <el-pagination
                                                        @size-change="handleSizeChangeDeptAndDoctor"
                                                        @current-change="handleCurrentChangeAndDoctor"
                                                        :current-page="currentPageDeptAndDoctor"
                                                        :page-sizes="[5, 10, 15, 20]"
                                                        :page-size="100"
                                                        layout="total, sizes, prev, pager, next, jumper"
                                                        :total="totalDeptAndDoctor">
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>

                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card class="chart-card" v-show="showAppointCard">
                                <div style="height: 820px;">
                                    <div class="header-wrapper">
                                        <div class="left-content">
                                            <h1>【{{currentDoctorName}}】排班</h1>
                                        </div>
                                        <div class="right-content">
                                            <i class="el-icon-back" style="font-size: 16px; color: #409EFF;" @click="goBack">返回</i>
                                        </div>
                                    </div>
                                    <el-divider></el-divider>
                                    <div class="table-header">
                                        <el-button type="warning" class="left-button" @click="updateSelection">发布</el-button>
                                        <el-button type="primary"  @click="showAddAppoint">新增</el-button>
                                        <div class="search-container">
                                            <div class="search-input">
                                                <el-date-picker
                                                        v-model="searchDeptAppointDate"
                                                        type="date"
                                                        placeholder="请选择日期">
                                                </el-date-picker>
                                            </div>
                                            <div class="button-container">
                                                <el-button type="primary" @click="showSchedules" class="left-button">查询</el-button>
                                            </div>
                                        </div>
                                    </div>

                                    <el-table
                                            :data="tableAppointData"
                                            stripe
                                            style="width: 100%"
                                            @selection-change="handleSelectionChange">
                                        <el-table-column fixed type="selection" width="55"></el-checkbox>
                                        </el-table-column>
                                        <el-table-column prop="schedulTime" label="排班日期" width="120px"></el-table-column>
                                        <el-table-column prop="sourceTotal" label="号源总量"></el-table-column>
                                        <el-table-column prop="sourceSurplus" label="剩余号源"></el-table-column>
                                        <el-table-column prop="status" label="状态" align="center">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.status === 0 ? 'info' : 'success'">
                                                    {{ scope.row.status === 0 ? '待发布' : '已发布' }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" width="300">
                                            <template slot-scope="scope"><!--scope.row.id获取当前行的id属性数据-->
                                                <el-button type="text" size="mini" @click="deleteAppointById(scope.row.id)" class="delete1-button">
                                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">删除</span>
                                                </el-button>
                                                <el-button type="text" size="mini" class="edit-button" @click="editedAppointById(scope.row.id)" v-if="scope.row.status !== 1">
                                                    <i class="el-icon-edit" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">编辑</span>
                                                </el-button>
                                                <el-button type="text" size="mini" class="doctor-button" @click="selectAppointByIdFindSource(scope.row.id)">
                                                    <i class="el-icon-user" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">号源</span>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <!--分页组件-->
                                    <div class="block" style=" float: right;margin-top: 20px">
                                        <el-pagination
                                                @size-change="handleSizeChangeDoctorAppoint"
                                                @current-change="handleCurrentChangeDoctorAppoint"
                                                :current-page="currentPageDeptAndDoctorAppoint"
                                                :page-sizes="[5, 10, 15, 20]"
                                                :page-size="100"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="totalDeptAndDoctorAppoint">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-empty description="选择排班日期,查看时间段排班" v-show="showSource" style="padding-top: 200px">
                            <el-col :span="12">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-empty>
                        <el-col :span="12" v-loading="loadingSource" element-loading-text="拼命加载中">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <transition name = "slide-fade">
                                        <el-card class="chart-card" v-show="showSourceCard">
                                            <div style="height: 410px;">
                                                <h1>时间段排班</h1>
                                                <el-divider></el-divider>
                                                <div class="table-header">
                                                    <el-button v-if="shouldShowAddButton" type="primary" @click="showAddSource">新增</el-button>
                                                </div>
                                                <!--渲染数据到前端页面的表格-->
                                                <el-table
                                                        stripe
                                                        ref="multipleTable"
                                                        :data="ListSource"
                                                        tooltip-effect="dark"
                                                        style="width: 100%"
                                                        fit
                                                >
                                                    <el-table-column label="时段">
                                                        <template slot-scope="scope">
                                                            <el-tag>{{ scope.row.frameTime }}</el-tag>
                                                            <span>-</span>
                                                            <el-tag>{{ scope.row.endTime }}</el-tag>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column prop="sourceTotal" label="号源总量"></el-table-column>
                                                    <el-table-column prop="sourceSurplus" label="剩余号源"></el-table-column>
                                                </el-table>
                                            </div>
                                        </el-card>
                                    </transition>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                    <!--增加排班时间段模态框开始-->
                    <el-dialog
                            title="新增排班时段"
                            :visible.sync="dialogSourceVisible"
                            width="35%"
                            @close="resetNewAppoint"
                    >
                        <el-form :model="newSource" :rules="newSourceRules" ref="newSourceForm" label-width="80px">
                            <el-form-item label="排班时间">
                                <template>
                                    <el-time-select
                                            placeholder="起始时间"
                                            v-model="newSource.frameTime"
                                            :picker-options="{
                                                start: '08:00',
                                                step: '00:30',
                                                end: '12:00'
                                            }"
                                            prop="frameTime"
                                    >
                                    </el-time-select>
                                    <el-time-select
                                            placeholder="结束时间"
                                            v-model="newSource.endTime"
                                            :picker-options="{
                                                 start: '12:00',
                                                 step: '00:30',
                                                 end: '22:00',
                                             minTime: newSource.frameTime
                                            }"
                                            prop="endTime"
                                    >
                                    </el-time-select>
                                </template>
                            </el-form-item>
                            <el-form-item label="号源总量" prop="sourceTotal">
                                <el-input v-model="newSource.sourceTotal"></el-input>
                            </el-form-item>
                           <!-- <el-form-item label="剩余号源" prop="sourceSurplus">
                                <el-input v-model="newSource.sourceSurplus"></el-input>
                            </el-form-item>-->
                            <el-form-item>
                                <el-button type="primary" @click="addSource">提交</el-button>
                                <el-button @click="resetSourceForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--增加排班时间段模态框结束-->

                    <!--增加排班模态框开始-->
                    <el-dialog
                            title="新增排班"
                            :visible.sync="dialogAppointVisible"
                            width="30%"
                            @close="resetNewAppoint"
                    >
                        <el-form :model="newAppoint" :rules="newAppointRules" ref="newAppointForm" label-width="80px" label-width="80px">
                            <el-form-item label="排班时间" prop="schedulTime">
                                <el-date-picker
                                        v-model="newAppoint.schedulTime"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="号源总量" prop="sourceTotal">
                                <el-input v-model="newAppoint.sourceTotal"></el-input>
                            </el-form-item>
                           <!-- <el-form-item label="剩余号源" prop="sourceSurplus">
                                <el-input v-model="newAppoint.sourceSurplus"></el-input>
                            </el-form-item>-->
                            <el-form-item>
                                <el-button type="primary" @click="addAppoint">提交</el-button>
                                <el-button @click="resetAppointForm">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-dialog>
                    <!--增加排班模态框结束-->
                    <!--排班编辑模态框开始-->
                    <el-dialog
                            title="编辑排班信息"
                            :visible.sync="editModalAppointVisible"
                            width="30%"
                            @close="resetAppointForm">
                        <el-form :model="editedAppoint" :rules="editAppointRules" ref="editAppointForm" label-width="80px">
                            <el-form-item label="排班日期" prop="schedulTime">
                                <el-date-picker
                                        v-model="editedAppoint.schedulTime"
                                        type="date"
                                        placeholder="选择日期"
                                ></el-date-picker>
                            </el-form-item>
                            <el-form-item label="号源总量" prop="sourceTotal">
                                <el-input v-model="editedAppoint.sourceTotal"></el-input>
                            </el-form-item>
                            <!--<el-form-item label="剩余号源" prop="sourceSurplus">
                                <el-input v-model="editedAppoint.sourceSurplus"></el-input>
                            </el-form-item>-->
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalAppointVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitAppointEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--排班模态框结束-->
                    <!--科室编辑模态框开始-->
                    <el-dialog
                            title="编辑科室信息"
                            :visible.sync="editModalDeptVisible"
                            width="30%"
                            @close="resetDeptForm">
                        <el-form :model="editedDept" :rules="editDeptRules" ref="editDeptForm" label-width="80px">
                            <el-form-item label="科室简介" prop="deptremark">
                                <el-input v-model="editedDept.deptremark"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalDeptVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitDeptEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--科室模态框结束-->
                </div>

                <div v-show="selectedIndex === '5'" style="width: 100%">
                    <h2>药品信息</h2>
                    <el-divider></el-divider>
                    <div class="table-header">
                        <el-button type="primary" @click="showAddDrug">新增</el-button>
                        <!--药品增加模态框开始-->
                        <el-dialog
                                title="新增药品"
                                :visible.sync="dialogDrugVisible"
                                width="30%"
                                @close="resetNewDrug"
                        >
                            <el-form :model="newDrug" :rules="drugRules" ref="newDrugForm" label-width="80px" label-width="80px">
                                <el-form-item label="编号" prop="drugNo">
                                    <el-input v-model="newDrug.drugNo"></el-input>
                                </el-form-item>
                                <el-form-item label="药品名称" prop="drugNo">
                                    <el-input v-model="newDrug.drugName"></el-input>
                                </el-form-item>
                                <el-form-item label="库存" prop="inventory">
                                    <el-input v-model="newDrug.inventory"></el-input>
                                </el-form-item>
                                <el-form-item label="单价" prop="unitprice">
                                    <el-input v-model="newDrug.unitprice"></el-input>
                                </el-form-item>
                                <el-form-item label="单位" prop="unit">
                                    <el-input v-model="newDrug.unit"></el-input>
                                </el-form-item>
                                <el-form-item label="用法" prop="usage">
                                    <el-select v-model="newDrug.usage">
                                        <el-option label="口服" value="1"></el-option>
                                        <el-option label="外敷" value="2"></el-option>
                                        <el-option label="注射" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="用量" prop="dosage">
                                    <el-input v-model="newDrug.dosage"></el-input>
                                </el-form-item>
                                <el-form-item label="功能主治" prop="remark">
                                    <el-input v-model="newDrug.remark"></el-input>
                                </el-form-item>
                                <el-form-item label="注意事项" prop="attention">
                                    <el-input v-model="newDrug.attention"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="addDrug">提交</el-button>
                                    <el-button @click="resetDrugForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <!--药品增加模态框结束-->
                        <!--药品编辑模态框开始-->
                        <el-dialog
                                title="药品信息修改"
                                :visible.sync="editModalDrugVisible"
                                width="30%"
                                @close="resetDrugForm">
                            <el-form :model="editedDrug" :rules="drugRules" ref="editDrugForm" label-width="80px">
                                <el-form-item label="编号" prop="drugNo">
                                    <el-input v-model="editedDrug.drugNo"></el-input>
                                </el-form-item>
                                <el-form-item label="药品名称" prop="drugName">
                                    <el-input v-model="editedDrug.drugName"></el-input>
                                </el-form-item>
                                <el-form-item label="库存" prop="inventory">
                                    <el-input v-model="editedDrug.inventory"></el-input>
                                </el-form-item>
                                <el-form-item label="单价" prop="unitprice">
                                    <el-input v-model="editedDrug.unitprice"></el-input>
                                </el-form-item>
                                <el-form-item label="单位" prop="unit">
                                    <el-input v-model="editedDrug.unit"></el-input>
                                </el-form-item>
                                <el-form-item label="用法" prop="usage">
                                    <el-select v-model="editedDrug.usage">
                                        <el-option label="口服" :value="1"></el-option>
                                        <el-option label="外敷" :value="2"></el-option>
                                        <el-option label="注射" :value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="用量" prop="dosage">
                                    <el-input v-model="editedDrug.dosage"></el-input>
                                </el-form-item>
                                <el-form-item label="功能主治" prop="remark">
                                    <el-input v-model="editedDrug.remark"></el-input>
                                </el-form-item>
                                <el-form-item label="注意事项" prop="attention">
                                    <el-input v-model="editedDrug.attention"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalDrugVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitDrugEdit">提交</el-button>
                            </span>
                        </el-dialog>
                        <!--药品编辑模态框结束-->

                        <!--药品详情模态框开始-->
                        <el-dialog
                                title="药品信息查看"
                                :visible.sync="showModalDrugVisible"
                                width="30%"
                                @close="resetShowDrug">
                            <el-form :model="showDrug"  ref="showDrugForm" label-width="80px">
                                <el-form-item label="编号" prop="drugNo">
                                    <el-input v-model="showDrug.drugNo"></el-input>
                                </el-form-item>
                                <el-form-item label="药品名称" prop="drugName">
                                    <el-input v-model="showDrug.drugName"></el-input>
                                </el-form-item>
                                <el-form-item label="库存" prop="inventory">
                                    <el-input v-model="showDrug.inventory"></el-input>
                                </el-form-item>
                                <el-form-item label="单价" prop="unitprice">
                                    <el-input v-model="showDrug.unitprice"></el-input>
                                </el-form-item>
                                <el-form-item label="单位" prop="unit">
                                    <el-input v-model="showDrug.unit"></el-input>
                                </el-form-item>
                                <el-form-item label="用法" prop="usage">
                                    <el-select v-model="showDrug.usage">
                                        <el-option label="口服" :value="1"></el-option>
                                        <el-option label="外敷" :value="2"></el-option>
                                        <el-option label="注射" :value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="用量" prop="dosage">
                                    <el-input
                                            type="textarea"
                                            :rows="2"
                                            :autosize="{ minRows:1, maxRows: 6 }"
                                            v-model="showDrug.dosage"
                                            readonly="true"
                                            class="auto-resizable"></el-input>
                                </el-form-item>
                                <el-form-item label="功能主治" prop="remark">
                                    <el-input
                                            type="textarea"
                                            :rows="2"
                                            :autosize="{ minRows:1, maxRows: 6 }"
                                            v-model="showDrug.remark"
                                            readonly="true"
                                            class="auto-resizable"></el-input>
                                </el-form-item>
                                <el-form-item label="注意事项" prop="attention">
                                    <el-input
                                            type="textarea"
                                            :rows="2"
                                            :autosize="{ minRows:1, maxRows: 6 }"
                                            v-model="showDrug.attention"
                                            readonly="true"
                                            class="auto-resizable"></el-input>

                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                 <el-button @click="showModalDrugVisible = false">返回</el-button>
                            </span>
                        </el-dialog>
                        <!--药品详情模态框结束-->

                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="drugNo" placeholder="请输入药品编号"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="drugName" placeholder="请输入药品名称"></el-input>
                            </div>
                            <el-button type="primary" @click="searchDrug">查询</el-button>
                        </div>
                    </div>
                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableDrugData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column prop="drugNo" label="编号" align="center"></el-table-column>
                        <el-table-column prop="drugName" label="药品名称" align="center"></el-table-column>
                        <el-table-column prop="inventory" label="库存" align="center"></el-table-column>
                        <el-table-column prop="unitprice" label="单价" align="center"></el-table-column>
                        <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                        <el-table-column prop="usage" label="用法" align="center">
                            <template slot-scope="scope">
                                <template v-if="scope.row.usage === 1">
                                    <el-tag type="success">口服</el-tag>
                                </template>
                                <template v-else-if="scope.row.usage === 2">
                                    <el-tag type="info">外敷</el-tag>
                                </template>
                                <template v-else-if="scope.row.usage === 3">
                                    <el-tag type="warning">注射</el-tag>
                                </template>
                                <template v-else>
                                    <el-tag type="danger">-</el-tag>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column prop="dosage" label="用量" align="center">
                            <template slot-scope="scope">
                                <div class="truncate">{{ scope.row.dosage }}</div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="remark" label="功能主治" align="center">
                            <template slot-scope="scope">
                                <div class="truncate">{{ scope.row.remark }}</div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="attention" label="注意事项" align="center">
                            <template slot-scope="scope">
                                <div class="truncate">{{ scope.row.attention }}</div>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="220" align="center">
                            <template slot-scope="scope"><!--scope.row.address获取当前行的address属性数据-->
                                <el-button type="danger" size="mini" @click="deleteDrugById(scope.row.id)">删除</el-button>
                                <el-button type="primary" size="mini" @click="editDurg(scope.row.id)">编辑</el-button>
                                <el-button type="info" size="mini" @click="showDurg(scope.row.id)">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeDrug"
                                @current-change="handleCurrentChangeDrug"
                                :current-page="currentPageDrug"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalDrug">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedIndex === '6'" style="width: 100%">
                    <h2>预约管理</h2>
                    <el-divider></el-divider>
                    <div class="table-header">
                        <el-button type="danger" @click="deleteBookingSelection">删除</el-button>
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="nickname" placeholder="请输入预约人"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="bookDoctorName" placeholder="请输入医生名称"></el-input>
                            </div>
                            <el-button type="primary" @click="searchBooking">查询</el-button>
                        </div>
                    </div>
                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableBookingData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="schedulTime" label="就诊日期" align="center"></el-table-column>
                        <el-table-column prop="nickName" label="预约人" align="center"></el-table-column>
                        <el-table-column label="时段">
                            <template slot-scope="scope">
                                <el-tag>{{ scope.row.frameTime }}</el-tag>
                                <span>-</span>
                                <el-tag>{{ scope.row.endTime }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="deptName" label="科室" align="center"></el-table-column>
                        <el-table-column prop="name" label="医生" align="center"></el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <template v-if="scope.row.appointmentStatus === 1">
                                    <el-tag type="info">已预约</el-tag>
                                </template>
                                <template v-else-if="scope.row.appointmentStatus === 2">
                                    <el-tag type="primary">诊断中</el-tag>
                                </template>
                                <template v-else-if="scope.row.appointmentStatus === 3">
                                    <el-tag type="warning">已取消</el-tag>
                                </template>
                                <template v-else-if="scope.row.appointmentStatus === 4">
                                    <el-tag type="success">已就诊</el-tag>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" class="recharge-button" @click="cancelBooking(scope.row.id)">
                                    <i class="el-icon-refresh" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">取消</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeBooking"
                                @current-change="handleCurrentChangeBooking"
                                :current-page="currentPageBooking"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalBooking">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedIndex === '7'" style="width: 100%">
                    <h2>就诊记录</h2>
                    <el-divider></el-divider>
                    <div class="table-header">
                        <el-button type="danger" @click="deleteAllRecord">批量删除</el-button>
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="RnickName" placeholder="请输入预约人"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="DocterName" placeholder="请输入医生名称"></el-input>
                            </div>
                            <el-button type="primary" @click="searchAdminRecord">查询</el-button>
                        </div>
                    </div>
                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableRecordData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="schedulTime" label="就诊日期" align="center"></el-table-column>
                        <el-table-column prop="nickName" label="预约人" align="center"></el-table-column>
                        <el-table-column prop="deptName" label="科室" align="center"></el-table-column>
                        <el-table-column prop="doctorName" label="医生" align="center"></el-table-column>
                        <el-table-column prop="healthStatus" label="健康症状" align="center"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" class="delete-button" @click="deleteRecord(scope.row.id)">
                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">删除</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeRecord"
                                @current-change="handleCurrentChangeRecord"
                                :current-page="currentPageRecord"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalRecord">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedIndex === '8'" style="width: 100%">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-card class="chart-card" v-show="showRecipeCard">
                                <div style="height: 800px;">
                                    <h2>处方信息</h2>
                                    <el-divider></el-divider>
                                    <div class="table-header">
                                        <div class="search-container">
                                            <div class="search-input">
                                                <el-input v-model="nickName" placeholder="请输入预约人"></el-input>
                                            </div>
                                            <el-button type="primary" @click="searchDoctorRecipe">查询</el-button>
                                        </div>
                                    </div>
                                    <!--渲染数据到前端页面的表格-->
                                    <el-table
                                            stripe
                                            fixed
                                            :data="tableRecipeData"
                                            tooltip-effect="dark"
                                            style="width: 100%"
                                            fit
                                            @selection-change="handleSelectionChange"
                                    >
                                        <el-table-column type="selection" width="55"></el-table-column>
                                        <el-table-column prop="schedulTime" label="就诊日期" align="center" width="100"></el-table-column>
                                        <el-table-column prop="nickName" label="就诊人" align="center"></el-table-column>
                                        <el-table-column prop="doctorName" label="医生" align="center"></el-table-column>
                                        <el-table-column prop="totalmoney" label="总金额" align="center"></el-table-column>
                                        <el-table-column prop="status" label="状态" align="center">
                                            <template slot-scope="scope">
                                                <el-tag :type="scope.row.status === 0 ? '' : 'success'">
                                                    {{ scope.row.status === 0 ? '未缴费' : '已缴费' }}
                                                </el-tag>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="announcements" label="注意事项" align="center"></el-table-column>
                                        <el-table-column label="操作" width="160px" align="center">
                                            <template slot-scope="scope">
                                                <el-button type="text" size="mini" class="recharge-button" @click="queryOpenDrug(scope.row.id)">
                                                    <i class="el-icon-setting" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">配药</span>
                                                </el-button>
                                                <el-button type="text" size="mini" class="delete-button" @click="AdminDeleteRecipe(scope.row.id)">
                                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                                    <span style="font-size: 14px;">删除</span>
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <div class="block" style=" float: right;margin-top: 20px">
                                        <el-pagination
                                                @size-change="handleSizeChangeRecipe"
                                                @current-change="handleCurrentChangeRecipe"
                                                :current-page="currentPageRecipe"
                                                :page-sizes="[5, 10, 15, 20]"
                                                :page-size="100"
                                                layout="total, sizes, prev, pager, next, jumper"
                                                :total="totalRecipe">
                                        </el-pagination>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                        <el-empty description="选择配药,查看给该患者开的药" v-show="showOpenDrug" style="padding-top: 200px">
                            <el-col :span="12">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-empty>
                        <el-col :span="12" v-loading="loading" element-loading-text="拼命加载中">
                            <el-row :gutter="20">
                                <el-col :span="24">
                                    <el-card class="chart-card" v-show="showDureCard">
                                        <div style="height: 410px;">
                                            <h2>药品信息</h2>
                                            <el-divider></el-divider>
                                            <!--渲染数据到前端页面的表格-->
                                            <el-table
                                                    stripe
                                                    ref="multipleTable"
                                                    :data="durgList"
                                                    tooltip-effect="dark"
                                                    style="width: 100%"
                                                    fit
                                            >
                                                <el-table-column prop="drugNo" label="药品编号" align="center" width="200"></el-table-column>
                                                <el-table-column prop="drugName" label="药品名称" align="center" width="200"></el-table-column>
                                                <el-table-column prop="unitprice" label="单价" align="center"></el-table-column>
                                                <el-table-column prop="number" label="数量" align="center"></el-table-column>
                                                <el-table-column prop="unit" label="单位" align="center"></el-table-column>
                                            </el-table>
                                            <div class="block" style=" float: right;margin-top: 20px">
                                                <el-pagination
                                                        @size-change="handleSizeChangeOpenDrug"
                                                        @current-change="handleCurrentChangeOpenDrug"
                                                        :current-page="currentPageOpenDrug"
                                                        :page-sizes="[5, 10, 15, 20]"
                                                        :page-size="100"
                                                        layout="total, sizes, prev, pager, next, jumper"
                                                        :total="totalOpenDrug">
                                                </el-pagination>
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>

                </div>

                <div v-show="selectedIndex === '9'" style="width: 100%">
                    <h2>留言反馈</h2>
                    <el-divider></el-divider>
                    <div class="table-header">
                        <el-button type="danger" @click="deleteAllFeedBack">批量删除</el-button>
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="Theme" placeholder="请输入主题关键字"></el-input>
                            </div>
                            <div class="search-input">
                                <el-input v-model="FNickName" placeholder="请输入留言人姓名"></el-input>
                            </div>
                            <el-button type="primary" @click="searchAdminFeedBack">查询</el-button>
                        </div>
                    </div>

                    <el-dialog
                            title="回复"
                            :visible.sync="editModalFeedBackVisible"
                            width="30%"
                            @close="resetFeedBackForm">
                        <el-form :model="editedFeed" :rules="editFeedRules" ref="editFeedBackForm" label-width="80px">
                            <el-form-item label="回复内容" prop="replyContent">
                                <el-input v-model="editedFeed.replyContent"></el-input>
                            </el-form-item>
                        </el-form>
                        <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalFeedBackVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitFeedBackEdit">提交</el-button>
                            </span>
                    </el-dialog>
                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableFeedBackData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="theme" label="主题" align="center"></el-table-column>
                        <el-table-column prop="nickName" label="姓名" align="center"></el-table-column>
                        <el-table-column prop="content" label="内容" align="center"></el-table-column>
                        <el-table-column label="状态" align="center">
                            <template slot-scope="scope">
                                <template v-if="scope.row.status === 0">
                                    <el-tag type="info">待回复</el-tag>
                                </template>
                                <template v-else-if="scope.row.status === 1">
                                    <el-tag type="primary">已回复</el-tag>
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column  label="回复内容" align="center">
                            <template slot-scope="scope">
                                <template v-if="scope.row.replyContent===null">
                                    --
                                </template>
                                <template v-else-if="scope.row.replyContent!=null">
                                    {{scope.row.replyContent}}
                                </template>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" class="recharge-button" :disabled="scope.row.status?1:0" @click="feedReply(scope.row.id)">
                                    <i class="el-icon-document" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">回复</span>
                                </el-button>
                                <el-button type="text" size="mini" class="delete-button" @click="deleteFeedBack(scope.row.id)">
                                    <i class="el-icon-delete" style="font-size: 16px;"></i>
                                    <span style="font-size: 14px;">删除</span>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeFeedBack"
                                @current-change="handleCurrentChangeFeedBack"
                                :current-page="currentPageFeedBack"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalFeedBack">
                        </el-pagination>
                    </div>
                </div>

                <div v-show="selectedIndex === '10'" style="width: 100%;">
                    <h2>公告信息</h2>
                    <div class="table-header">
                        <el-button type="danger" @click="deleteNoticeSelection" class="delete-button">删除</el-button>
                        <el-button type="primary" @click="showAddNotice">新增</el-button>

                        <!--增加模态框开始-->
                        <el-dialog
                                title="新增公告"
                                :visible.sync="dialogNoticeVisible"
                                width="30%"
                                @close="resetNewNotice"
                        >
                            <el-form :model="newNotice" :rules="noticeRules" ref="newNoticeForm" label-width="80px" label-width="80px">
                                <el-form-item label="主题">
                                    <el-input v-model="newNotice.notice"></el-input>
                                </el-form-item>
                                <el-form-item label="发布时间">
                                    <el-date-picker
                                            v-model="newNotice.issueTime"
                                            type="date"
                                            placeholder="选择日期"
                                    ></el-date-picker>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="addNotice">提交</el-button>
                                    <el-button @click="resetNoticeForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-dialog>
                        <!--增加模态框结束-->
                        <!--公告编辑模态框开始-->
                        <el-dialog
                                title="编辑公告"
                                :visible.sync="editModalNoticeVisible"
                                width="30%"
                                @close="resetNoticeForm">
                            <el-form :model="editedNotice" ref="editNoticeForm" label-width="80px">
                                <el-form-item label="主题">
                                    <el-input v-model="editedNotice.notice"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                                 <el-button @click="editModalNoticeVisible = false">取消</el-button>
                                 <el-button type="primary" @click="submitNoticeEdit">提交</el-button>
                            </span>
                        </el-dialog>
                        <!--编辑模态框结束-->
                        <div class="search-container">
                            <div class="search-input">
                                <el-input v-model="themeNotice" placeholder="请输入公告主题"></el-input>
                            </div>
                            <el-button type="primary" @click="searchNotice">查询</el-button>
                        </div>
                    </div>

                    <!--渲染数据到前端页面的表格-->
                    <el-table
                            stripe
                            :data="tableNoticeData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            fit
                            @selection-change="handleSelectionChange"
                    >
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="notice" label="公告主题" align="center"></el-table-column>
                        <el-table-column prop="issueTime" label="发布时间" align="center"></el-table-column>
                        <el-table-column label="操作" width="200">
                            <template slot-scope="scope"><!--scope.row.address获取当前行的address属性数据-->
                                <el-button type="danger" size="mini" @click="deleteNoticeById(scope.row.id)">删除</el-button>
                                <el-button type="primary" size="mini" @click="editNotice(scope.row.id)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block" style=" float: right;margin-top: 20px">
                        <el-pagination
                                @size-change="handleSizeChangeNotice"
                                @current-change="handleCurrentChangeNotice"
                                :current-page="currentPageNotice"
                                :page-sizes="[5, 10, 15, 20]"
                                :page-size="100"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalNotice">
                        </el-pagination>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script src="js/echarts.min.js"></script>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/index.min.js"></script>
<!--引入axios框架文件-->
<script src="js/axios.js"></script>
<script src="js/dayjs.min.js"></script>
<script src="js/bgindex.js"></script>
</html>
